<template>
  <div class="wrapper">
    <swiper :options="swiperOptions" ref="mySwiper">
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <img class="swiper-img" :src="item.imgUrl" :alt="'无法显示'">
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
export default {
  name: "swipers",
  props: ["swiperLists"],
  
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination",
      },

      // swiperList: [
      //   {
      //     _id: "01",
      //     imgURL: "https://imgs.qunarzz.com/vs_ceph_vcimg/5be2601d1f921f166646b817459a2727.jpeg",              
      //     title: "潮玩",
      //   },
      //   {
      //     _id: "02",
      //     imgURL: "https://imgs.qunarzz.com/vs_ceph_vcimg/280673be5655fc91ce24ba605c62fe07.jpeg",
      //     title: "快乐节",
      //   }
      // ]
      
      swiperList: this.swiperLists,
    }
  },
}
</script>

<style scoped>  
  /* 轮播图 */
  .wrapper {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 30.476%;
    /* padding-bottom: 00px; */
  }
  /* 图片 */
  .wrapper .swiper-img {
    width: 100%;
  }
  /* 小圆点 */
  .wrapper >>> .swiper-pagination-bullet {
    background-color: #fff;  
  }
</style>